<template>
  <el-dialog :close-on-click-modal="false" append-to-body title="处理工单" :visible.sync="visible" width="800px">
    <div class="add-form">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="后台单号" prop="xmbzNo">
          <span>{{ form.xmbzNo }}</span>
        </el-form-item>
        <el-form-item label="平台单号" prop="platformOrderId">
          <span>{{ form.platformOrderId }}</span>
        </el-form-item>
        <el-form-item label="协助内容" prop="content">
          <span>{{ form.content }}</span>
        </el-form-item>
        <el-form-item label="附件" prop="content">
          <imageView :src="item" v-for="(item,index) in changeExtJsoncomplaint(form.extJson)" :key="index"
            class="w-80 h-80 mr-5 mb-5 d-ib" />
        </el-form-item>
        <el-form-item label="处理结果" prop="resultContent">
          <el-input type="textarea" rows="5" v-model.trim="form.resultContent" size="small" placeholder="处理结果" clearable></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="submit" :loading="loading">{{ loading ? '提交中...' :
          '提交'
      }}</el-button>
    </span>

  </el-dialog>
</template>

<script>
import { updateService } from '@/api/workorder/consultCustomerService'
import imageView from '@/components/image/imageView'

export default {
  components: {
    imageView,
  },
  data() {
    return {
      visible: false,
      loading: false,
      form: {
        "resultContent": "",
      },
      rules: {
        resultContent: [{
          required: true,
          message: "请填写处理结果",
          trigger: "blur"
        }],
      },
      orderData: {}
    }
  },
  methods: {
    show({ data }) {
      this.clearForm()
      this.visible = true
      if (data) {
        this.form = {
          ...data,
        }
      }
    },
    clearForm() {
      this.form = {
        "resultContent": "",
      }
      this.$refs.form && this.$refs.form.clearValidate()
    },
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          updateService(this.getParams()).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: `提交成功！`
              })
              this.visible = false
              this.$emit('submit')
            } else {
              this.$message({
                type: 'error',
                message: res.data.msg
              })
            }
          }).finally(() => {
            this.loading = false
          })
        }
      })
    },
    getParams() {
      const params = {
        "id": this.form.id,
        "disposeState": 1,
        "resultContent": this.form.resultContent,
      }
      return params
    },
    changeExtJsoncomplaint(list) {
      let imgList = []
      try {
        imgList = JSON.parse(list).img
      } catch (error) {
        console.error(error)
        imgList = []
      }
      return imgList
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
